@extends('admin.layout')
@section('content')

    
                    <div class="box">
                    <div class="row">
                    <form action="{{ url('/admin/user') }}" method="get">
                        <div class="col-md-6">
                         <label>
                           <select class="form-control input-sm" aria-controls="example1" name="pages">
                               <option 
                                @if(!empty($request['pages']) && $request['pages']==5)
                                selected='selected'
                                @endif
                               value="5">5</option>
                               <option 
                               @if(!empty($request['pages']) && $request['pages']==10)
                                selected='selected'
                                @endif
                               @if(empty($request['pages']))
                                selected='selected'
                                @endif 
                               value="10">10</option>
                               <option
                                @if(!empty($request['pages']) && $request['pages']==15)
                                selected='selected'
                                @endif
                               value="15">15</option>
                               <option 
                                @if(!empty($request['pages']) && $request['pages']==20)
                                selected='selected'
                                @endif
                               value="20">20</option>
                           </select>
                           </label>&nbsp条数据/页   
                        </div>
                        <div lass="col-md-6" align="right">
                         
                            <div class="box-tools" style="padding:10px">
                                <div class="input-group" style="width: 150px;">
                                    <input name="keyword" class="form-control input-sm pull-right" value="{{ $request['keyword'] or '' }}" placeholder="请输入要查询用户名" type="text">
                                    <div class="input-group-btn">
                                        <button class="btn btn-sm btn-default"><i class="fa fa-search">搜索</i></button>
                                    </div>
                                </div>
                            </div>
                            
                        </div> 
                       </form>   
                    </div>

                        <div class="box-body table-responsive no-padding">
                            <table class="table table-hover">
                                <tbody><tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>邮箱</th>                                    
                                    <th>令牌</th>                                    
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                @foreach ($data as $user)
                                    <tr>
                                    <td class="ids">{{ $user -> id }} </td>
                                    <td class="username">{{ $user -> username }} </td>
                                    <td>{{ $user -> email }} </td>
                                    <td>{{ $user -> token }} </td>
                                    <td class="status">
                                        @if ($user -> status == 0)
                                            禁用
                                        @else
                                            启用
                                        @endif
                                    </td>
                                    <td><a href="{{ url('admin/user/edit/') }}/{{ $user -> id }}"><span class="label label-success">编辑</span></a> || <a href="{{ url('admin/user/delete/') }}/{{ $user -> id }}"><span class="label label-danger">删除</span></a></td>
                                </tr>
                                @endforeach
                            </tbody>
                               
                                    
                             
                             <tr align="right"><td colspan="6">{!! $data-> appends($request)-> render() !!}</td></tr>
                            </table>
                            
                        </div><!-- /.box-body -->
                    </div><!-- /.box -->
                
        <script type="text/javascript">
        window.onload=function(){
             $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

             // 检验jquery是否引入
            // alert($);
            
            // 通过AJAX对状态进行点击进行更改
            $('.status').on('click',function(){
                // alert('111');
                // 获取id
                var id=$(this).parent().find('.ids').html();

                var td=$(this);
                // alert(id);
                $.ajax({
                        url:"{{ url('admin/user/ajaxUpdate') }}",
                        type:'POST',
                        data:{id:id},
                        success:function(data){
                            // alert(data);
                            if(data=='0'){
                                td.html('禁用');
                            }else{
                                td.html('启用');
                            }
                        },
                        error:function(){
                            alert('数据修改失败');
                        },
                        dataType:'json'
                    });
            });

            // 双击事件函数
            function dblclick(){
                // alert('111');
                // 获取id
                var id=$(this).parent().find('.ids').html();
                // 获取当前元素
                var t=$(this);
                // 获取之前的名字
                var oldName=$(this).html();
                // 将要求的框改为input框
                var ips= $("<input type='text' />");
                // 将input框内容默认为 oldName
                ips.val(oldName);
                // 将 input 框整体放入当前元素中
                $(this).html(ips);

                ips.select();

                ips.on('blur',function(){
                    // 获取ips内容
                    var newName=ips.val();
                    // alert(newName);
                    $.ajax({
                            url:"{{ url('admin/user/ajaxUpdateUsername') }}",
                            type:'POST',
                            data:{id:id,username:newName},
                            success:function(data){
                                // alert(data);
                                if(data == 1){
                                    t.html(newName);
                                }else if(data == 0){
                                    t.html(oldName);
                                    alert('用户名已存在');
                                }else{
                                    t.html(oldName);
                                    alert('用户名添加失败');
                                }

                                t.on('dblclick',dblclick);
                                
                            },
                            error:function(){
                                t.html(oldName);
                                alert('数据修改失败');
                                t.on('dblclick',dblclick);
                            },
                            dataType:'json'
                        });
                });

                t.unbind('dblclick');
                
            }

            // 双击修改用户名
            $('.username').on('dblclick',dblclick);
            
        }
           
        </script>
@endsection